<template>
	<div class="v-weather" :style="`color: ${textColor}`">
		<template v-if="weather.cityZh">
			<!--标准天气一行展示       天气图标/更新日期/城市/天气/温度/风向/相对湿度/降水量-->
			<div class="v-weather--normal-oneline wh100" v-if="size === 'normal' && type === 'oneline'"  >
				<div class="tianqiFlex">
					<div class="w100">{{ weather.cityZh }}</div>
					<div class="w500  marL20">
						<span>{{ weather.ptime }}</span>
						<span>更新</span>
					</div>
				</div>
				<div class="tianqiFlex">
					<div class="w100 fs66">{{ weather.temp }} </div>
					<div class="w500  marL20 tianqiFlex">
						<div class="v-weather-icon marL20" ref="svgContainer"><img :src="weather.img" /></div>
						<div>{{ weather.weatherZh }}</div>
					</div>
				</div>
				<div class="tianqiFlex">
					<div class="w100">
						<span>湿度：</span><span>{{ weather.humidity }}</span>
					</div>
					<div class="marL20 w500 ">
						<span>{{ weather.wdZh }}：</span><span>{{ weather.wisib }}</span>
					</div>
				</div>
				<!-- {{ weather.cityZh }} / {{ weather.weatherZh }} / {{ weather.temp }} / {{ weather.wdZh }} {{ weather.wisib }} / {{ weather.humidity }} -->
				<!--<div class="v-weather-icon" ref="svgContainer"><img :src="weather.img" /></div>-->
			</div>
		</template>
		<div v-if="loadingAimation !== null" class="v-loading-wrap">
			<div class="v-loading-icon" ref="svgLoading"></div>
		</div>
	</div>
</template>

<script>
	// 临时依赖,打包成库时需要注释掉，如果是项目测试则需要打开注释
	import axios from 'axios';
	import Lottie from 'lottie-web';
	import weatherIcon from './icon-json/index';
	const getWeatherUrlBase = 'http://192.144.132.100:7070/ad/app/getWeatherInfo';
	const weatherCode = {

	};
	export default {
		name: 'sxc-weather',
		props: {
			size: {
				type: String,
				default: 'normal'
			},
			type: {
				type: String,
				default: 'oneline'
			},
			color: {
				type: String,
				default: '000000'
			},
			iconSize: {
				type: Number,
				default: 100
			},
			citySelect: {
				type: Array,
				default: () => ['China', 'beijing', 'beijing']
			},
			refreshTime: {
				type: [String, Number],
				default: 30 * 60 * 1000
			},
			commonStyleColor: {
				type: String,
				default: '#000000'
			}
		},
		computed: {
			cityStr() {
				const len = this.citySelect.length;
				return len ? this.citySelect[len - 1] : 'beijing';
			}
		},
		data: () => ({
			convartedColor: [],
			location: {}, // 定位功能获取的经纬度
			ip: null,
			position: {}, // 经纬度查询获得的位置信息
			weather: {},
			weatherIconAnimation: null,
			locationIconAimation: null,
			loadingAimation: null,
			timer: null,
			errorMsg: '',
			textColor: '#000000'
		}),
		watch: {
			citySelect(v1, v2) {
				if(JSON.stringify(v1) === JSON.stringify(v2)) {
					return false;
				}
				this.getWeather();
			},
			async color(data) {
				this.convartColor();
				Lottie.destroy();
			},
			commonStyleColor: {
				handler(newName, oldName) {
					this.textColor = newName;
				},
				immediate: true
			}
		},
		mounted() {
			console.log(111)
			this.showLoading(true);
			this.convartColor();
			this.getWeather();
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		methods: {
			convartColor() {
				const colorTemp = /([a-zA-Z0-9]{2})([a-zA-Z0-9]{2})([a-zA-Z0-9]{2})/.exec(this.color);
				this.convartedColor = [parseInt(`0x${colorTemp[1]}`), parseInt(`0x${colorTemp[2]}`), parseInt(`0x${colorTemp[3]}`)];
			},
			async getWeather() {
				const url = `${getWeatherUrlBase}`;
				let params = {
					city: this.cityStr
				};
				const weather = await axios.get(url, {
					params
				});
				if(weather.status === 200) {
					const {
						data
					} = weather;
					if(data.info) {
						const info = data.info;
						let img = require(`./weather/${info.img}.png`);
						this.weather = {
							ptime: info.ptime.substr(0, 10),
							img: img,
							cityZh: info.cityZh,
							weatherZh: info.weatherZh ? info.weatherZh : '',
							temp: info.temp ? info.temp : '',
							wdZh: info.wdZh ? info.wdZh : '',
							wisib: info.wisib,
							pcpn: '',
							humidity: info.humidity ? info.humidity : ''
						};
						this.$nextTick(() => {
							this.showLoading(false);
						});
					} else {
						console.log('获取天气失败。');
					}
				} else {
					console.log('网络错误。');
				}
			},
			showLoading(show) {
				if(!show) {
					this.loadingAimation = null;
					return;
				}
				const svgLoading = this.$refs.svgLoading;
				this.loadingAimation = Lottie.loadAnimation({
					wrapper: svgLoading,
					animType: 'svg',
					loop: true,
					animationData: weatherIcon['loading'](this.convartedColor[0] / 255, this.convartedColor[1] / 255, this.convartedColor[2] / 255)
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
.wh100{
	width: 100%;
	height: 100%;
}
	.fs66 {
		font-size: 42px;
	}
	
	p {
		margin: 0;
		padding: 0;
	}
	
	.v-weather {
		display: inline-block;
		cursor: default;
		user-select: none;
		.v-loading-wrap {
			height: 180px;
			width: 150px;
			position: relative;
			.v-loading-icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
				width: 80px;
				height: 50px;
			}
		}
		.v-weather--small-oneline,
		.v-weather--normal-oneline {
			/*display: inline-block;*/
			padding: 10px 0px 0 60px;
			position: relative;
			.w100 {
				width: 200px;
				text-align: left;
			}
			.w500 {
				width: 500px;
				text-align: left;
			}
			.tianqiFlex {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.marL20 {
				margin-left: 45px;
			}
			.v-weather-icon {
				/*position: absolute;
      top: -12px;
      left: 0px;*/
			}
		}
		.v-weather--small-multiline {
			display: inline-block;
			padding: 6px 20px;
			position: relative;
			text-align: center;
			.v-weather-icon {
				margin: 0 auto;
			}
			p {
				height: 24px;
				line-height: 24px;
				font-size: 16px;
			}
		}
		.v-weather--normal-multiline {
			display: inline-block;
			padding: 6px 20px;
			position: relative;
			text-align: center;
			.v-weather-icon {
				margin: 0 auto;
			}
			.map {
				height: 30px;
				line-height: 30px;
				font-size: 16px;
				div {
					display: inline-block;
					width: 24px;
					height: 24px;
					margin-left: -14px;
					vertical-align: middle;
				}
			}
			p {
				height: 20px;
				line-height: 20px;
				font-size: 16px;
			}
		}
	}
</style>